<template>
  <div class="infinite-container">
    <div class="page-header">
      <div class="flex flex_right">
        <div class="pd10">温州市苍南县南宋镇溪光村</div>
      </div>
      <div class="flex flex_center f30" style="border-bottom:2px solid #fff;padding:10px 0;">
        <div>管理员入口
           <small class="f12"></small>
        </div>

      </div>
    </div>

    <common-list title="姓名/称呼">
      <div class="confirm-message">
        <mu-text-field hintText="请输入姓名..." fullWidth v-model="title" />
      </div>
    </common-list>
    <common-list title="捐款金额">
      <div class="confirm-message">
        <mu-text-field hintText="请输入金额..." v-model="price" type="number" fullWidth />
      </div>
    </common-list>

    <div class="mt20 flex flex_center" style="margin:20px 40px;">
      <mu-raised-button primary  fullWidth style="background:#f5161c;" class="no-shadow" @click="submitHandle">保存</mu-raised-button>
    </div>

    <div class="pd10">最新的10条捐款记录,累计总金额
      <span class="t5 f20">{{total | fixedMoney}}</span>
    </div>
    <table class="page-table" width="100%">
      <tr class="th">
        <td width="20%">序号</td>
        <td width="50%">公司/组织/个人</td>
        <td width="30%">现金/物质</td>
      </tr>
      <tr v-for="(item, index) in list" :key="index">
        <td>{{(index+1)}}</td>
        <td>{{item.title}}</td>
        <td>{{item.price | fixedMoney}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
import CommonList from "@/components/CommonList";
export default {
  components: { CommonList },
  mounted() {
    var temp = [];
    for (var i = 1; i < 11; i++) {
      temp.push({
        title: "张伟" + i,
        price: Math.ceil(Math.random() * 10000)
      });
    }
    this.list = temp;
  },

  data() {
    return {
      title: "",
      price: "",
      list:[],
      total: 1000000
    };
  },
  methods: {
    submitHandle() {
      if (!this.title || !this.price) {
        this.$store.commit("UPDATE_TOAST", { message: "数据不能为空" });
        return;
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "../common/css/flex.css";
@import "../common/css/vars";
.page-header {
  background: #f5161c;
  height: 100px;
  color: #fff;
}
.f30 {
  font-size: 1.8em;
}
.bordered-button {
  color: #333;
  background: #fff;
  border-radius: 12px;
  margin-top: 10px;
  padding: 2px 6px;
}
.page-table {
  border-collapse: collapse;
  text-align: center;
  background: #fff;
  .th {
    background: #fbd5d2;
  }
  td {
    padding: 10px;
    border: 1px solid #f2f2f2;
  }
}
</style>
